<template>
  <div class="view-fill">
    <div class="app-container-flex">
      <NewFullScreen
        v-model="showDialog"
        title="计费记录明细"
        @returnBack="returnBack"
      >
        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body">
            <basic-information :info="infoList"> </basic-information>
          </div>
        </div>

        <div class="model-panel">
          <div class="model-panel-title">
            <p>产品明细</p>
          </div>
          <div class="model-panel-body">
            <div class="flex_full_item">
              <!-- 表格 -->
              <page-table
                :refresh="tableInfo.refresh"
                :init-curpage="tableInfo.initCurpage"
                v-model:data="tableInfo.data"
                :api="tableInfo.api"
                :pager="false"
                :check-box="false"
                :tab-index="true"
                :query="filterInfo.query"
                :field-list="tableInfo.fieldList"
                :handle="tableInfo.handle"
                :row-class-name="tableRowClassName"
              >
              </page-table>
            </div>
          </div>
        </div>

        <div class="model-panel">
          <div class="model-panel-title">
            <p>耗材记录</p>
          </div>
          <div class="model-panel-body">
            <div class="flex_full_item">
              <!-- 表格 -->
              <page-table
                :refresh="consumeTableInfo.refresh"
                :init-curpage="consumeTableInfo.initCurpage"
                v-model:data="consumeTableInfo.data"
                :pager="false"
                :check-box="false"
                :api="consumeTableInfo.api"
                :query="consumeTableInfo.query"
                :field-list="consumeTableInfo.fieldList"
                :handle="consumeTableInfo.handle"
              />
              <!--              <template v-slot:col-orderNo="scope">-->
              <!--                <span class="slip-edit" @click="showConsumeDetail(scope.row)">{{ scope.row.orderNo || "-" }}</span>-->
              <!--              </template>-->
            </div>
          </div>
        </div>
      </NewFullScreen>
    </div>
  </div>
</template>

<script setup name="chargeItemRecordDetail">
import { getChargeItemConsume, getChargeItemRecord } from '@/api/his'
import { consumes } from '@/api/stock'

const { proxy } = getCurrentInstance()
const emit = defineEmits()

const props = defineProps(['visible', 'id'])

const infoList = reactive({
  data: {},
  fieldList: [
    { label: '事务处理', value: 'transactionTypeValue', type: 'text' },
    { label: '业务处理', value: 'businessTypeValue', type: 'text' },
    { label: '计费组合码', value: 'combinationNum', type: 'text' },
    { label: '计费单号', value: 'chargeNumber', type: 'text' },
    { label: '病人编码', value: 'patientCode', type: 'text' },
    { label: '病人', value: 'patientName', type: 'text' },
    { label: '病种', value: 'diseasesName', type: 'text' },
    { label: '住院号', value: 'hospitalNumber', type: 'text' },
    { label: '医生编码', value: 'doctorCode', type: 'text' },
    { label: '主管医生', value: 'doctorName', type: 'text' },
    { label: '执行人编码', value: 'executorCode', type: 'text' },
    { label: '执行人姓名', value: 'executorName', type: 'text' },
    { label: '计费日期', value: 'chargeDate', type: 'text' },
    { label: '同步日期', value: 'interfaceDate', type: 'text' },
    { label: '开单科室编码', value: 'orderingDeptCode', type: 'text' },
    { label: '开单科室', value: 'orderingDeptName', type: 'text' },
    { label: '执行科室编码', value: 'performedDeptCode', type: 'text' },
    { label: '执行科室', value: 'performedDeptName', type: 'text' },
    { label: '病区', value: 'ward', type: 'text' },
    // { label: "扣减数量", value: "deductionAmount", type: "text" },
    { label: '状态', value: 'statusValue', type: 'text' },
    { label: '异常信息', value: 'errorMsg', type: 'text' },
    { label: '单号', value: 'orderNo', type: 'text' },
    { label: '备注', value: 'remark', type: 'text' },
  ],
})
// 过滤相关配置
const filterInfo = reactive({
  sortArr: [],
  copyQueryMap: {},
  query: {
    queryMap: {
      orderId: {
        queryType: 'EQUALS',
        queryCategory: 'AND',
        value: null,
      },
    },
    queryParams: {},
    sortString: '',
    copyQueryMap: {},
    groupMap: {},
    groups: [],
    customizeUserVO: {},
  },
  searchList: [],
  searchBtn: [],
  btnList: [],
})
const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emits('update:visible', newValue) // 更新父组件shows
  },
})
// 表格相关
const tableInfo = reactive({
  refresh: 1,
  initCurpage: 1,
  api: undefined,
  data: [],
  summaryFieldList: [],
  selections: [],
  fieldList: [],
})
const consumeTableInfo = reactive({
  api: getChargeItemConsume,
  query: {},
  fieldList: [
    { label: '消耗类别', value: 'consumeType' },
    { label: '登记单号', value: 'orderNo' },
    { label: '来源单号', value: 'sourceOrderNo' },
    { label: '备注', value: 'remark' },
  ],
})
const modifyInfo = reactive({
  visible: false,
  title: '',
  orderId: '',
  tableKey: '',
  isCopy: false,
})

//明细相关
const consumeDetailInfo = reactive({
  visible: false,
  id: '',
})

const systemConfig = ref('')

let obj = {
  hisItemCode: {
    label: 'HIS计费项目编码',
    value: 'hisItemCode',
    componentType: 'input',
    show: true,
    hidden: false,
  },
  hisItemName: {
    label: 'HIS计费项目名称',
    value: 'hisItemName',
    componentType: 'input',
    show: true,
    hidden: false,
  },
  productUnitOfMeasure: {
    label: '产品单位',
    value: 'productUnitOfMeasure',
    componentType: 'input',
    show: true,
    hidden: false,
  },
  productLot: {
    label: '产品批号',
    value: 'productLot',
    componentType: 'input',
    show: true,
    hidden: false,
  },
  deductionAmount: {
    label: '扣减数量',
    value: 'deductionAmount',
    componentType: 'input',
    show: true,
    hidden: false,
  },
  barCode: {
    label: '条码号',
    value: 'barCode',
    componentType: 'input',
    show: true,
    hidden: false,
  },
}
tableInfo.fieldList = Object.values({
  ...obj,
})
getCustomize()

// function returnModify() {
//   if (this.orderId) {
//     getCustomize();
//   }
// }
function getConsumeList(orderId) {
  getChargeItemConsume(orderId).then((resp) => {
    if (resp && resp.success) {
      consumeTableInfo['data'] = resp.data
    }
  })
}
//导出excel
function exportExcel() {}
//打印
function print() {}
function getOrderInfo(orderId) {
  getChargeItemRecord(orderId).then((resp) => {
    if (resp && resp.success) {
      infoList['data'] = resp.data
      tableInfo['data'] = [resp.data]
    }
  })
}

function tableRowClassName({ row = undefined }) {
  if (row.licenseEndDate) {
    let dataDiff = proxy.$fn.dateDiffLicen(row.licenseEndDate)
    if (dataDiff <= 0) {
      return 'expire-row'
    } else if (Number(systemConfig.value) >= dataDiff) {
      return 'nearly-row'
    }
  }
  return ''
}
function getCustomize() {
  getOrderInfo(props.id)
  getConsumeList(props.id)
}
function returnBack() {
  emit('returnBack', false)
}
function showConsumeDetail(row) {
  let params = {
    orderNo: row.orderNo,
  }
  consumes(params).then((resp) => {
    if (resp && resp.success) {
      consumeDetailInfo.id = resp.data.id
      consumeDetailInfo.visible = true
    }
  })
}
</script>
<style scoped lang="scss">
:deep(.page-table > .el-table) {
  overflow-y: hidden;
}
.model-panel-title {
  display: flex;
  align-items: center;
  .model-tips {
    display: flex;
    align-items: center;
    margin-left: 10px;
    color: #909399;
    .model-tips-nearly,
    .model-tips-expire {
      display: block;
      margin-left: 5px;
      width: 17px;
      height: 17px;
    }
    .model-tips-nearly {
      background: #fceacb;
    }
    .model-tips-expire {
      background: #f5e4e4;
    }
  }
}
:deep(.el-table .nearly-row) {
  background: #fceacb;
}
:deep(.el-table .expire-row) {
  background: #f5e4e4;
}
// :deep(.el-table__body tr.hover-row > td) {
//   background-color: transparent !important;
// }
</style>
